import { useRef, useState } from "react";
import type { FormInstance, RadioChangeEvent } from "antd";
import { Radio } from "antd";
import { Form, Input } from "antd";
import { RuleTree } from "@alipay/techui-rule-tree";
import type { Locale } from "../../locale";

const LOCALE_RADIO_OPTIONS = [
  {
    label: "中文",
    value: "zh-CN",
  },
  {
    label: "English",
    value: "en-US",
  },
];

export default function App() {
  const [loacle, setLocale] = useState<Locale>("zh-CN");
  const [value, setValue] = useState({});
  const formRef = useRef<FormInstance>();

  /**
   * 切换组件语言，目前支持 zh-CN | en-US
   */
  const onLocaleChange = (event: RadioChangeEvent) => {
    setLocale(event.target.value);
  };

  return (
    <div>
      <Radio.Group
        value={loacle}
        onChange={onLocaleChange}
        options={LOCALE_RADIO_OPTIONS}
        optionType="button"
      />
      <RuleTree<{ name: string }>
        locale={loacle}
        formRef={formRef}
        onChange={(value) => {
          setValue(value);
        }}
        defaultValue={{
          relation: "and",
          children: [
            {
              name: "A",
            },
            {
              name: "B",
            },
          ],
        }}
      >
        {(field) => {
          return (
            <Form.Item
              noStyle
              name={[field.name, "name"]}
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          );
        }}
      </RuleTree>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
